<!DOCTYPE html>
<html lang="en">

<head>
    <title>每日签到</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <link rel="stylesheet" href="/js/plugins/SignIn/css/sign2.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/SignIn/js/calendar2.js"></script>
    <script src="/js/plugins/dialog2/dialog.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>


    <style>
        .sign {
            margin-left: 30%;
            margin-right: 30%;
            margin-top: 50px;
        }

        .info {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script>
        $(function () {
            //获取当前登录用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            //用户id
            //console.log(user.id);
            //渲染数据
            $(".info").renderValues(user)


            $("#tp-weather-widget").click(function () {
                window.location.href = "/weather.html";
            })
            var signList = [];
            $.get('/signInDate/' + user.id + '/listAllSignInDate', {id: user.id}, function (data) {
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    var json = JSON.parse(data[i].jsonString);
                    calUtil.init(signList, json);
                }
                calUtil.init(signList);
                calUtil.draw(signList);
                $('#singDays').val(signList.length);
                $(document).dialog({
                    type: 'notice',
                    infoText: '每日签到有积分奖励和丰富的奖品!',
                    autoClose: 2000
                })
            })
            //点击签到
            $('#signin').click(function () {
                var day = new Date().getDate();
                var clas = $(".sign_row div");
                for (var i = 0; i < clas.length; i++) {
                    if (clas[i].innerHTML == day) {
                        if ($(clas[i]).hasClass("calendar_record")) {
                            // $(clas[i]).removeClass("calendar_record");
                            // $(clas[i]).addClass("on");
                            calUtil.init(signList, {"signDay": clas[i].innerHTML});
                            $.post('/signInDate/' + user.id, {id: user.id}, function () {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '签到成功',
                                    autoClose: 2000
                                })
                            })
                            $('#singDays').val(signList.length);
                        }
                        else {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '不用重复签到',
                                autoClose: 2000
                            })
                        }
                    }
                }

            })


        })
    </script>


</head>

<body>
<div class="nav-search">
    <a href="javascript:history.go(-1)">
        <span><i class="fa fa-angle-left fa-2x"></i></span>
    </a>
</div>
<hr/>
<div class="container">
    <div class="row info">
        <div class="col-2 info">
            <img class="rounded-circle" render-src="headImgUrl" align="center">
        </div>
        <!--天气插件-->
       <!-- <div style="margin-left: 40%;">
           <span>
               <a href="#" id="tp-weather-widget">
               </a>
            </span>
        </div>-->
    </div>

    <!--签到日历插件-->
    <div id="calendar">
        <div class="sign_main" id="sign_layer ">
            <div class="sign_succ_calendar_title">
                <div class="calendar_month_span"></div>
            </div>
            <div class="sign_equal" id="sign_cal">
            </div>
        </div>
    </div>
    <div>
        <hr/>
        <span style="margin-left: 10%;background-color: #FF5722">
            *每月签到15天有奖励*
            已签到<input type="number" id="singDays"
                      style="width: 20px;color: orange;border:0;font-size: 20px" readonly>天
        </span>
    </div>
    <div>
        <button class="btn btn-warning btn-lg sign" id="signin">点击签到</button>
    </div>
</div>
</body>
</html>